<template>
  <div class="demo">
    <div class="demo-title">useForm 自定义触发时机</div>
    <div class="demo-content">
      <Form :label-col="labelCol" :wrapper-col="wrapperCol">
        <Form.Item label="Activity name" v-bind="validateInfos.name">
          <Input
            v-model:value="modelRef.name"
            @blur="validate('name', { trigger: 'blur' }).catch(() => {})"
          />
        </Form.Item>
        <Form.Item label="Activity zone" v-bind="validateInfos.region">
          <Select v-model:value="modelRef.region" placeholder="please select your zone">
            <Select.Option value="shanghai">Zone one</Select.Option>
            <Select.Option value="beijing">Zone two</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item :wrapper-col="{ span: 14, offset: 4 }">
          <Button type="primary" @click.prevent="onSubmit">Create</Button>
          <Button style="margin-left: 10px" @click="resetFields">Reset</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, toRaw } from 'vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import Select from '@sscd/select';
  import Form from '@sscd/form';
  const labelCol = { span: 4 };
  const wrapperCol = { span: 14 };
  const modelRef = reactive({ name: '', region: undefined });
  const rulesRef = reactive({
    name: [
      { required: true, message: 'Please input Activity name' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [{ required: true, message: 'Please select region' }],
  });
  const { resetFields, validate, validateInfos } = Form.useForm(modelRef, rulesRef);
  const onSubmit = () => {
    validate()
      .then(() => console.log(toRaw(modelRef)))
      .catch((err) => console.log('error', err));
  };
</script>
